import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import SvgIcon from '@material-ui/core/SvgIcon';
import Home from '@material-ui/icons/Home';
import Account from '@material-ui/icons/AccountCircle';

const {blogName, githubLink} = require('../config');
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Logged from './user/Logged';
import LogInButton from './user/LogInButton';

const styles = {
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },
};

class NavigationMenu extends Component {
    constructor(props) {
        super(props);
        this.handleRequestChange = this.handleRequestChange.bind(this);
        this.handleOpen = this.handleOpen.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.state = {
            selectedIndex: props.selectedIndex,
            open: false,
        };
    }

    handleOpen() {
        this.setState({open: true});
    }

    handleClose() {
        this.setState({open: false});
    }

    handleRequestChange(event, index) {
        this.lastIndex = this.state.selectedIndex;
        this.setState({
            selectedIndex: index,
        });
    };

    render() {
        const {classes} = this.props;
        return (
            <div>
                <Drawer
                    open={this.state.open}
                    onClose={this.handleClose}
                >
                    <div
                        tabIndex={0}
                        role='button'
                        onClick={this.handleClose}
                        onKeyDown={this.handleClose}
                    >
                        <List
                            style={{width: 250}}
                            value={this.state.selectedIndex}
                            onChange={this.handleRequestChange}
                        >
                            <ListItem button
                                      value={1}
                                      onClick={() => {
                                          this.props.history.push('/');
                                          this.handleClose();
                                      }}
                            >
                                <ListItemIcon><Home/></ListItemIcon>
                                <ListItemText primary='Home'/>
                            </ListItem>
                            <ListItem button
                                      value={2}
                                      onClick={() => {
                                          window.open(githubLink);
                                          this.setState({
                                              selectedIndex: this.lastIndex,
                                          });
                                      }}
                            >
                                <ListItemIcon>
                                    <SvgIcon viewBox="0 0 1024 1024">
                                        <path
                                            d="M978.5 409.6H455.1c-25.1 0-45.5 20.3-45.5 45.5v113.7c0 25.1 20.3 45.5 45.5 45.5h318.6c25.1 0 45.5 20.4 45.5 45.5v22.6c0 75.4-61.2 136.5-136.5 136.5H250.3c-25.1 0-45.5-20.4-45.5-45.5V341.2c0-75.5 61.2-136.5 136.5-136.5h637c25.1 0 45.5-20.3 45.5-45.5l0.1-113.6c0-25.1-20.3-45.5-45.5-45.5H341.3C152.9 0 0 152.9 0 341.3v637.2c0 25.1 20.4 45.5 45.5 45.5h671.3c169.6 0 307.2-137.5 307.2-307.2V455.1c0-25.1-20.4-45.5-45.5-45.5z"/>
                                    </SvgIcon>
                                </ListItemIcon>
                                <ListItemText primary='Gitee'/>
                            </ListItem>
                            {
                                this.props.admin &&
                                <ListItem button
                                          value={3}
                                          onClick={() => {
                                              this.props.history.push('/admin');
                                              this.handleClose();
                                          }}
                                >
                                    <ListItemIcon><Account/></ListItemIcon>
                                    <ListItemText primary='Admin'/>
                                </ListItem>
                            }
                        </List>
                    </div>
                </Drawer>
                <AppBar position='fixed'>
                    <Toolbar>
                        <IconButton
                            color='inherit'
                            aria-label='Menu'
                            className={classes.menuButton}
                            onClick={this.handleOpen}
                        >
                            <MenuIcon/>
                        </IconButton>
                        <Typography
                            variant='title'
                            color='inherit'
                            className={classes.flex}
                            style={{cursor: 'pointer'}}
                            onClick={() => {
                                this.props.history.push('/');
                            }}
                        >
                            {blogName}
                        </Typography>
                        {this.props.token ? <Logged/> : <LogInButton/>}
                    </Toolbar>
                </AppBar>
                <div style={{height: 60}}/>
            </div>
        );
    }
}

NavigationMenu.propTypes = {
    history: PropTypes.object,
    selectedIndex: PropTypes.number.isRequired,
    token: PropTypes.string,
    admin: PropTypes.bool,
    classes: PropTypes.object.isRequired,
};

const mapStateToProps = state => {
    return {
        ...state.user,
    };
};

export default withStyles(styles)(connect(mapStateToProps)(withRouter(NavigationMenu)));
